@extends('admin.layout')

@section('title', '房间详情')
@section('page-title', '房间详情')

@section('content')
<div class="space-y-6">
    <!-- 页面头部 -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="sm:flex-auto">
            <h1 class="text-xl font-semibold text-gray-900">房间详情：{{ $room->name }}</h1>
            <p class="mt-2 text-sm text-gray-700">查看房间 {{ $room->name }} 的详细信息</p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4">
            <a href="{{ route('admin.rooms.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                返回房间列表
            </a>
        </div>
    </div>

    <!-- 房间基本信息 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">基本信息</h2>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    <div class="h-16 w-16 rounded-full bg-indigo-500 flex items-center justify-center">
                        <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                    </div>
                </div>
                <div>
                    <div class="text-lg font-medium text-gray-900">{{ $room->name }}</div>
                    <div class="text-sm text-gray-500">{{ $room->description ?: '暂无描述' }}</div>
                </div>
            </div>
            <div>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">房间类型</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $room->type === 'permanent' ? '永久房间' : '临时房间' }}</dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">创建时间</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $room->created_at->format('Y-m-d H:i:s') }}</dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">过期时间</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $room->expires_at ? $room->expires_at->format('Y-m-d H:i:s') : '永不过期' }}</dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">状态</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $room->status === 'active' ? 'bg-green-100 text-green-800' : ($room->status === 'expired' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                                {{ $room->status === 'active' ? '活跃' : ($room->status === 'expired' ? '已过期' : '未知') }}
                            </span>
                        </dd>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">房间ID</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $room->id }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <!-- 创建者信息 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">创建者信息</h2>
        </div>
        <div class="p-6">
            @if($room->creator)
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    <img class="h-12 w-12 rounded-full" src="{{ $room->creator->avatar ?: 'https://www.gravatar.com/avatar/' . md5(strtolower(trim($room->creator->openid ?? ''))) . '?d=identicon' }}" alt="创建者头像">
                </div>
                <div>
                    <div class="text-sm font-medium text-gray-900">{{ $room->creator->nickname ?: '未设置昵称' }}</div>
                    <div class="text-sm text-gray-500">{{ $room->creator->phone ?: '未绑定手机' }}</div>
                </div>
            </div>
            @else
            <p class="text-sm text-gray-500">创建者信息不可用</p>
            @endif
        </div>
    </div>

    <!-- 菜单信息 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">菜单信息</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 菜单来源 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-900 mb-3">菜单来源</h3>
                    <div class="flex items-center space-x-3">
                        @if($room->menu_source === 'default')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                                默认菜单
                            </span>
                        @elseif($room->menu_source === 'template')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                                模板菜单
                            </span>
                        @else
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                                自定义菜单
                            </span>
                        @endif
                    </div>
                </div>

                <!-- 菜单模板 -->
                @if($room->menu_template_id && $room->menuTemplate)
                <div>
                    <h3 class="text-sm font-medium text-gray-900 mb-3">使用模板</h3>
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <div class="h-10 w-10 rounded-lg bg-indigo-100 flex items-center justify-center">
                                <svg class="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <div class="text-sm font-medium text-gray-900">{{ $room->menuTemplate->name }}</div>
                            <div class="text-sm text-gray-500">{{ count($room->menuTemplate->dishes ?? []) }} 个菜品</div>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- 菜品预览 -->
            @if($room->menu_source === 'template' && $room->menuTemplate)
            <div class="mt-6">
                <h3 class="text-sm font-medium text-gray-900 mb-3">菜品预览</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach(collect($room->menuTemplate->dishes)->take(6) as $dishData)
                    <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                        <div class="flex-shrink-0">
                            <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
                                <svg class="h-4 w-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-gray-900 truncate">{{ $dishData['name'] ?? '未知菜品' }}</div>
                            @if(isset($dishData['category']))
                            <div class="text-xs text-gray-500">{{ $dishData['category'] }}</div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
                @if(count($room->menuTemplate->dishes ?? []) > 6)
                <div class="mt-3 text-center">
                    <span class="text-sm text-gray-500">还有 {{ count($room->menuTemplate->dishes ?? []) - 6 }} 个菜品...</span>
                </div>
                @endif
            </div>
            @endif
        </div>
    </div>

    <!-- 房间成员 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">房间成员 ({{ $room->members->count() }})</h2>
        </div>
        <div class="p-6">
            @if($room->members->count() > 0)
            <ul role="list" class="divide-y divide-gray-200">
                @foreach($room->members as $member)
                <li class="py-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <img class="h-8 w-8 rounded-full" src="{{ $member->avatar ?: 'https://www.gravatar.com/avatar/' . md5(strtolower(trim($member->openid ?? ''))) . '?d=identicon' }}" alt="成员头像">
                        <div class="ml-3">
                            <div class="text-sm font-medium text-gray-900">{{ $member->nickname ?: '未设置昵称' }}</div>
                            <div class="text-sm text-gray-500">{{ $member->phone ?: '未绑定手机' }}</div>
                        </div>
                    </div>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $member->pivot->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $member->pivot->is_active ? '活跃' : '非活跃' }}
                    </span>
                </li>
                @endforeach
            </ul>
            @else
            <p class="text-sm text-gray-500 text-center">该房间暂无成员。</p>
            @endif
        </div>
    </div>

    <!-- 房间订单 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">房间订单 ({{ $room->orders->count() }})</h2>
        </div>
        <div class="p-6">
            @if($room->orders->count() > 0)
            <ul role="list" class="divide-y divide-gray-200">
                @foreach($room->orders as $order)
                <li class="py-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <svg class="h-6 w-6 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        <div>
                            <a href="{{ route('admin.orders.show', $order->id) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">订单号: {{ $order->order_id }}</a>
                            <p class="text-xs text-gray-500">创建时间: {{ $order->created_at->format('Y-m-d H:i:s') }}</p>
                        </div>
                    </div>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $order->status === 'completed' ? 'bg-green-100 text-green-800' : ($order->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                        {{ $order->status === 'completed' ? '已完成' : ($order->status === 'pending' ? '待处理' : '已取消') }}
                    </span>
                </li>
                @endforeach
            </ul>
            @else
            <p class="text-sm text-gray-500 text-center">该房间暂无订单。</p>
            @endif
        </div>
    </div>
</div>
@endsection
